<!-- 当年适龄子女 -->
<template>
	<zh-app style="font-family: '阿里巴巴普惠体'">
		<!-- 导航栏 -->
		<zh-navbar title="当年适龄子女" color="#85a5ff" linear="right"/>
		<zh-spin :load="data.loading" tip="信息加载中，请耐心等候" >
			<view v-if="!data.hasChild">
				<zh-result title="未匹配到适龄子女" subTitle="您还没有在系统中登记适龄子女信息" :showBtn="true" btnText="前往准新生登记" @click="gotoDj"></zh-result>
			</view>
			<!-- tab页 -->
			<zh-tabs v-if="data.hasChild" @change="tabschange"  :item-width="elderFlag?170:120" :itemHeight="120" :width="750" :height="0" itemModel="line" default-name="kids">
				<zh-tabs-pane :transprent="true"  name="kids" title="子女">
					<scroll-view scroll-y="true" style="height: 85vh;">
					<kids :myCheckInfo="data.myCheckInfo" @showMessage="onShowMessage" v-model="data.childList[index]" :key="'child'+index" v-for="(item, index) in data.childList" ></kids>
					</scroll-view>
				</zh-tabs-pane>
				<zh-tabs-pane v-if="data.myCheckInfo.hjCheck.showBaseFlag" :transprent="true"  name="hj" title="户籍">
					<zh-sheet v-if="!data.myCheckInfo.fcCheck.showBaseFlag">
						<zh-result status="lock" color="amber" title="暂未开放查询" subTitle="户籍信息尚未开放查询" :showBtn="false" ></zh-result>
					</zh-sheet>
					<scroll-view  scroll-y="true" v-if="data.myCheckInfo.hjCheck.showBaseFlag" style="width: 100%;margin-top: 20rpx;height: 85vh;">
						<household :myCheckInfo="data.myCheckInfo" @showMessage="onShowMessage" v-model="data.childList[index]" :key="'household'+index" v-for="(item, index) in data.childList" ></household>
					</scroll-view>
				</zh-tabs-pane>
				<zh-tabs-pane v-if="data.myCheckInfo.fcCheck.showBaseFlag||data.myCheckInfo.wqCheck.showBaseFlag" :transprent="true"  name="fc" title="房产">
					<view style="margin-top:20rpx; width: 100%;" class="flex flex-col flex-col-center-center" >
					<zh-segtab :round="24" :width="690" v-model="data.fcType" color="primary" bgColor="grey-1" activeColor="white" :list="fcList" :defaultValue="data.fcType"></zh-segtab>
					<view v-if="data.fcType==='fc'">
						<zh-sheet v-if="!data.myCheckInfo.fcCheck.showBaseFlag">
							<zh-result status="lock" color="amber" title="暂未开放查询" subTitle="房产信息尚未开放查询" :showBtn="false" ></zh-result>
						</zh-sheet>
						<scroll-view scroll-y="true"  v-if="data.myCheckInfo.fcCheck.showBaseFlag" style="width: 100%;height: 80vh;">
								<zh-sheet v-if="data.showHouseList.length<=0">
									<zh-result  title="没有房产信息" subTitle="您本人名下在东阳没有可用于入学的房产,房产在父母一方名下的，只有拥有人才可以查看,如与实际情况不符,请拨打电话86655172" :showBtn="false" btnText="拨打电话" @click="CallPhone('0579-86655172')"></zh-result>
								</zh-sheet>
								<view v-if="data.showHouseList.length>0" style="margin: 0rpx;">
									<house  :myCheckInfo="data.myCheckInfo" :key="'house'+houseIndex" v-for="(item, houseIndex) in data.showHouseList" :houseInfo="item" :index="houseIndex"></house>
									<zh-sheet  :margin="[30, 0]" @click="clickMore" color="grey" text class="flex-row-center-center">
										<zh-text :label="data.houseNextPage?'点击查看更多房产':'没有更多房产'"></zh-text>
									</zh-sheet>
									
								</view>
						</scroll-view>
					</view>
					<view v-if="data.fcType==='wq'" style="width: 100%;">
						<zh-sheet v-if="!data.myCheckInfo.wqCheck.showBaseFlag" >
							<zh-result status="lock" color="amber" title="暂未开放查询" subTitle="购房合同信息尚未开放查询" :showBtn="false" ></zh-result>
						</zh-sheet>
						<scroll-view scroll-y="true" v-if="data.myCheckInfo.wqCheck.showBaseFlag" style="width: 100%;height: 80vh;">
							<zh-sheet v-if="data.wqList.length<=0">
							<zh-result  title="未获取到网签(购房合同)信息" :subTitle="(!data.myCheckInfo.bmFlag&&data.myCheckInfo.wqCheck.dsjFlag)?'如果与实际情况不符,可点击重新获取,每天限获取一次。如果获取后仍与实际情况不符,请携带相关材料到将要报名的学校登记。':'未获取到您在东阳的网签(购房合同)信息'" :showBtn="!data.myCheckInfo.bmFlag&&data.myCheckInfo.wqCheck.dsjFlag"  btnText="重新获取" @click="getWqInfo"></zh-result>
							</zh-sheet>
							<wqForm :myCheckInfo="data.myCheckInfo" :key="'wq'+index" v-for="(item, index) in data.wqList" @refresh="getReWq" v-model="data.wqList[index]" :index="index"></wqForm>
							<zh-sheet v-if="data.wqList.length>0&&!data.myCheckInfo.bmFlag" :shadow="3" :margin="[40, 20]" :round="5" :padding="[20,20]" color="deep-orange" text>
								<zh-text >如果与实际情况不符,可<span style="color:#3B5CF0;font-weight: 600;" @click="getWqInfo">重新获取</span>，每天限获取一次。如果重新获取后仍与实际情况不符,请携带相关材料到将要报名的学校登记。</zh-text>
							</zh-sheet>
						</scroll-view>
					</view>
				</view>
					
				</zh-tabs-pane>
				<zh-tabs-pane  v-if="data.myCheckInfo.sbCheck.showBaseFlag" :transprent="true" name="sb" title="社保">
					<view  style="width: 100%;">
						<zh-sheet v-if="!data.myCheckInfo.sbCheck.showBaseFlag">
							<zh-result   status="lock" color="amber" title="暂未开放查询" subTitle="社保信息尚未开放查询" :showBtn="false" ></zh-result>
						</zh-sheet>
						<scroll-view scroll-y="true" v-if="data.myCheckInfo.sbCheck.showBaseFlag" style="width: 100%;height: 85vh;">
							<zh-spin :load="data.sbLoading" tip="社保信息加载中，请耐心等候">
								<zh-sheet v-if="data.sbList.length<=0">
								<zh-result  title="未获取到社保信息" :subTitle="(!data.myCheckInfo.bmFlag&&data.myCheckInfo.sbCheck.dsjFlag)?'未获取到您在东阳的企业养老参保信息,如果与实际情况不符,可点击重新获取,每天限获取一次。':'未获取到您在东阳企业养老参保信息'" :showBtn="!data.myCheckInfo.bmFlag&&data.myCheckInfo.sbCheck.dsjFlag"  btnText="重新获取" @click="getCbInfo"></zh-result>
								</zh-sheet>
								<sbForm :myCheckInfo="data.myCheckInfo" :key="'sb'+index" v-for="(item, index) in data.sbList" v-model="data.sbList[index]" :index="index" @refresh="getReSb"></sbForm>
								<zh-sheet v-if="data.sbList.length>0&&!data.myCheckInfo.bmFlag&&(data.myCheckInfo.sbCheck.dsjFlag||data.myCheckInfo.sbCheck.ssBaseFlag)" :shadow="3" :margin="[40, 20]" :round="5" :padding="[20,20]" color="deep-orange" text>
									<zh-text v-if="data.myCheckInfo.sbCheck.dsjFlag&&data.myCheckInfo.sbCheck.ssBaseFlag">如果与实际情况不符,可<span style="color:#3B5CF0;font-weight: 600;" @click="getCbInfo">重新获取</span>，每天限获取一次。如果社保信息重新获取后仍与实际不符，请前往浙里办截图最近6个月企业养老缴费记录，点此<span style="color:#3B5CF0;font-weight: 600;" @click="gotoAppeal('8')">提交申诉</span>。</zh-text>
									<zh-text v-if="data.myCheckInfo.sbCheck.dsjFlag&&!data.myCheckInfo.sbCheck.ssBaseFlag">如果与实际情况不符,可<span style="color:#3B5CF0;font-weight: 600;" @click="getCbInfo">重新获取</span>，每天限获取一次。</zh-text>
									<zh-text v-if="!data.myCheckInfo.sbCheck.dsjFlag&&data.myCheckInfo.sbCheck.ssBaseFlag">如果与实际情况不符，请前往浙里办截图最近6个月企业养老缴费记录，点此<span style="color:#3B5CF0;font-weight: 600;" @click="gotoAppeal('8')">提交申诉</span>。</zh-text>
								</zh-sheet>
							</zh-spin>
						</scroll-view>
					</view>
				</zh-tabs-pane>
				<zh-tabs-pane v-if="data.myCheckInfo.jzzCheck.showBaseFlag" :transprent="true" name="jzz" title="居住证">
					<view  style="width: 100%;">
						<zh-sheet v-if="!data.myCheckInfo.jzzCheck.showBaseFlag">
							<zh-result  status="lock" color="amber" title="暂未开放查询" subTitle="居住证信息尚未开放查询" :showBtn="false" ></zh-result>
						</zh-sheet>
						<scroll-view scroll-y="true" v-if="data.myCheckInfo.jzzCheck.showBaseFlag" style="width: 100%;height: 85vh;">
							<zh-spin :load="data.jzzLoading" tip="居住证信息加载中，请耐心等候">
								<zh-sheet v-if="data.jzzList.length<=0">
									<zh-result  title="未获取到居住证信息" :subTitle="(!data.myCheckInfo.bmFlag&&data.myCheckInfo.jzzCheck.dsjFlag)?'未获取到您在东阳的居住证信息,如果与实际情况不符,可点击重新获取,每天限获取一次。':'未获取到您在东阳的居住证信息'" :showBtn="!data.myCheckInfo.bmFlag&&data.myCheckInfo.jzzCheck.dsjFlag"  btnText="重新获取" @click="getJzzInfo"></zh-result>
								</zh-sheet>
								<jzzForm :myCheckInfo="data.myCheckInfo" :key="'jzz'+index" v-for="(item, index) in data.jzzList" v-model="data.jzzList[index]" :index="index" @refresh="getReJzz"></jzzForm>
								<zh-sheet v-if="data.jzzList.length>0&&!data.myCheckInfo.bmFlag" :shadow="3" :margin="[40, 20]" :round="5" :padding="[20,20]" color="deep-orange" text>
									<zh-text v-if="data.myCheckInfo.jzzCheck.dsjFlag&&data.myCheckInfo.jzzCheck.ssBaseFlag">如果与实际情况不符,可<span style="color:#3B5CF0;font-weight: 600;" @click="getJzzInfo">重新获取</span>，每天限获取一次。如果居住证信息重新获取后仍与实际不符，请前往浙里办截取居住证信息图片，点此<span style="color:#3B5CF0;font-weight: 600;" @click="gotoAppeal('6')">提交申诉</span>。</zh-text>
									<zh-text v-if="data.myCheckInfo.jzzCheck.dsjFlag&&!data.myCheckInfo.jzzCheck.ssBaseFlag">如果与实际情况不符,可<span style="color:#3B5CF0;font-weight: 600;" @click="getJzzInfo">重新获取</span>，每天限获取一次。</zh-text>
									<zh-text v-if="!data.myCheckInfo.jzzCheck.dsjFlag&&data.myCheckInfo.jzzCheck.ssBaseFlag">如果与实际情况不符，请前往浙里办截取居住证信息图片，点此<span style="color:#3B5CF0;font-weight: 600;" @click="gotoAppeal('6')">提交申诉</span>。</zh-text>
								</zh-sheet>
							</zh-spin>
						</scroll-view>
					</view>
				</zh-tabs-pane>
				<zh-tabs-pane v-if="data.myCheckInfo.qyCheck.showBaseFlag" :transprent="true"  name="qy" title="营业执照">
					<scroll-view scroll-y="true"  style="width: 100%;height: 85vh;">
						<zh-spin :load="data.qyLoading" tip="营业执照信息加载中，请耐心等候">
							<zh-sheet v-if="data.qyList.length<=0">
								<zh-result  title="未获取到营业执照信息" :subTitle="(!data.myCheckInfo.bmFlag&&data.myCheckInfo.qyCheck.dsjFlag)?'如果与实际情况不符,请携带相关材料到将要报名的学校登记。':'未获取到您在东阳的营业执照信息'" :showBtn="false"  btnText="重新获取" ></zh-result>
							</zh-sheet>
							<qyForm :myCheckInfo="data.myCheckInfo" :key="'qy'+index" v-for="(item, index) in data.qyList" v-model="data.qyList[index]" :index="index" ></qyForm>
							<zh-sheet v-if="data.qyList.length>0&&!data.myCheckInfo.bmFlag" :shadow="3" :margin="[40, 20]" :round="5" :padding="[20,20]" color="deep-orange" text>
								<zh-text >如果与实际情况不符,请携带相关材料到将要报名的学校登记。</zh-text>
							</zh-sheet>
						</zh-spin>
					</scroll-view>
				</zh-tabs-pane>
			</zh-tabs>
								
		</zh-spin>
		<zh-message ref="messageRef" :duration="2000"></zh-message>
	</zh-app>
</template>
<script lang="ts" setup>
	import {ref, reactive,computed} from "vue";
	import kids from './components/kids.vue';
	import household from './components/household.vue';
	import house from './components/house.vue';
	import sbForm from './components/sbForm.vue';
	import jzzForm from './components/jzzForm.vue';
	import wqForm from './components/wqForm.vue';
	import qyForm from './components/qyForm.vue';
	import { onLoad,onShow } from "@dcloudio/uni-app";
	import { system,user} from '@/store';
	import * as util from '@/tool/function/util'
	import * as dayjs from 'dayjs/esm/index'
	const DayJs = dayjs.default
	// ------------------接收传入参数(组件)-------------------

	// ------------------钩子函数----------------------------
	// 初始化
	onLoad(() => {
		getOpCheck()
		//getChild()
		
	})
	onShow(() => {
		let key=data.checkedTab
		if(key==='fc'){
			data.houseList=[]
			getHouse()
			data.wqList=[]
			getWq()
		}else if(key==='sb'){
			data.sbList=[]
			getSb()
		}else if(key==='jzz'){
			data.jzzList=[]
			getJzz()
		}else if(key==='kids'){
			getChild()
		}else if(key==='hj'){
			getChild()
		}else if(key==='qy'){
			getQy()
		}
	})
	// ------------------变量区------------------------------
	const messageRef=ref()

	// 主数据
	const data = reactive({
		loading:false,
		houseLoading:false,//房产查询
		sbLoading:false,//社保查询
		jzzLoading:false,//居住证
		wqLoading:false,//网签
		qyLoading:false,//企业
		myCheckInfo:{hjCheck:{showBaseFlag:true},fcCheck:{showBaseFlag:true},jzzCheck:{showBaseFlag:true},sbCheck:{showBaseFlag:true},qyCheck:{},wqCheck:{}} as any,
		childList:[],
		houseList:[],//房产信息
		showHouseList:[],//房产信息
		housePageNum:1,
		houseNextPage:false,
		jzzList:[],//居住证信息
		wqList:[],//网签信息
		sbList:[],//社保信息
		qyList:[],//营业执照信息
		hasChild:false,
		checkedTab:'kids',
		fcType:'fc'
	})
	const fcList = ref([
		{text:'房产证',id:'fc'},
		{text:'购房合同',id:'wq'}
	])
	const elderFlag=computed(() => {return system.uiStyle==='elder'})
	// ------------------方法区------------------------------
	//获取业务期
	const getOpCheck=()=>{
	  let params={}
	  $api.common.send.post("edustudentenrollpre0016", params).then((res: any) => {
		data.myCheckInfo=res.result;
	  })
	}
	const getChild=()=>{
		//查询当年适龄子女信息
		let params={}
		data.loading=true
		$api.common.send.post("edustudentenrollpre0015", params).then((res: any) => {
			data.childList=res.result||[];
			if(data.childList.length>0){
				data.hasChild=true
			}else{
				data.hasChild=false
			}
			data.loading=false
		}).catch(()=>{
			data.loading=false
			
		})
	}
	//获取房产信息
	const clickMore=()=>{
		if(!data.houseNextPage){
			return
		}
		let housePageNum=data.housePageNum
		housePageNum=housePageNum+1;
		data.housePageNum=housePageNum
		let size=2+5*(housePageNum-1)
		let total=data.houseList.length
		if(total<=size){
			data.houseNextPage=false
		}
		let showHouseList=[] as any
		data.houseList.forEach((el:any) => {
			if(el.index<=size){
				showHouseList.push(el)
			}
		})
		data.showHouseList=showHouseList
	}
	const getHouse=()=>{
		if(data.houseList.length>0){
			data.showHouseList=data.houseList
			return
		}
		data.housePageNum=1;
		data.houseNextPage=false;
		let params={}
		data.houseLoading=true
		$api.common.send.post("eduHouse0012", params).then((res: any) => {
			let houseList=res.result||[]
			let i=1
			let showHouseList=[] as any
			houseList.forEach((el:any) => {
				el.index=i;
				if(i<3){
					showHouseList.push(el)
				}
				i=i+1;
			})
			
			data.houseList=houseList
			data.showHouseList=showHouseList
			if(i>=3){
				data.houseNextPage=true;
			}
			data.houseLoading=false
		}).catch(()=>{
			data.houseLoading=false
			
		})
	}
	const getReSb=()=>{
		//刷新社保信息
		data.sbList=[]
		getSb()
	}
	//获取社保信息
	const getSb=()=>{
		if(data.sbList.length>0){
			return
		}
		let params={}
		data.sbLoading=true
		$api.common.send.post("EduSocialSecurity0009", params).then((res: any) => {
			data.sbList=res.result||[]
			data.sbLoading=false
		}).catch(()=>{
			data.sbLoading=false
			
		})
	}
	const getReJzz=()=>{
		//刷新居住证信息
		data.jzzList=[]
		getJzz()
	}
	//获取居住证信息
	const getJzz=()=>{
		if(data.jzzList.length>0){
			data.jzzLoading=false
			return
		}
		let params={}
		data.jzzLoading=true
		$api.common.send.post("EduLivePlace0009", params).then((res: any) => {
			data.jzzList=res.result||[]
			data.jzzLoading=false
		}).catch(()=>{
			data.jzzLoading=false
			
		})
	}
	//获取企业（营业执照）信息
	const getQy=()=>{
		if(data.qyList.length>0){
			data.qyLoading=false
			return
		}
		let params={}
		data.qyLoading=true
		$api.common.send.post("EduCompany0009", params).then((res: any) => {
			data.qyList=res.result||[]
			data.qyLoading=false
		}).catch(()=>{
			data.qyLoading=false
			
		})
	}
	//获取网签信息
	const getWq=()=>{
		if(data.wqList.length>0){
			return
		}
		getReWq()
	}
	const getReWq=()=>{
		let params={}
		data.wqLoading=true
		$api.common.send.post("eduNetsign0009", params).then((res: any) => {
			data.wqList=res.result||[]
			data.wqLoading=false
		}).catch(()=>{
			data.wqLoading=false
			
		})
	}
	//切换选项卡
	const tabschange=(key:string)=>{
		data.checkedTab=key
		if(key==='fc'){
			getHouse()
			getWq()
		}else if(key==='sb'){
			getSb()
		}else if(key==='jzz'){
			getJzz()
		}else if(key==='wq'){
			getWq()
		}else if(key==='kids'){
			getChild()
		}
	}
	
	//前往登记页面
	const gotoDj=()=>{
		$router.replace('/pages/edu/newStuRegister/newStuRegister',{})
	}
	const CallPhone=(e:any)=>{//拨打热线
		let zlbFlag=false;
		// #ifdef H5
		zlbFlag=system.zlbFlag
		
		//#endif
		if(zlbFlag){
			if(ZWJSBridge){
				ZWJSBridge.phoneCall({ 
					corpId: e,
				}).then((result :any) => { 
					console.log(result); 
				}).catch((error :any) => { 
					console.log(error); 
				});
			}else{
				uni.makePhoneCall({
					phoneNumber: e
				});
			}
		}else{
			uni.makePhoneCall({
				phoneNumber: e
			});
		}
	}
	const getJzzInfo=()=>{
		//获取居住证信息
		let idcard=user.userInfo?.idcard
		if(!idcard){
			return;
		}
		let jzzcountMap=util.getCookie("getJzzCount:"+idcard);
		let curData=DayJs(new Date()).format('YYYYMMDD');
		let flag=true;
		let count=1;
		if(jzzcountMap){
			let json=jzzcountMap;
			count=json[curData]||1
			if(json[curData]&&Number(json[curData])>=1){
				flag=false;
				let messageData: any = {}
				messageData.model = 'warn'
				messageData.text = '今日居住证信息获取已达上限，请明天再试！'
				messageRef.value.show(messageData)
				return
			}
		}
		if(flag){
			data.jzzLoading=true
			$api.common.send.post("EduLivePlace0008", {},null,true).then((res: any) => {
				let map = {} as any;
        		map[curData]=count + 1
				util.setCookie("getJzzCount:"+idcard,map);
				 if(res.result&&res.result.length>0){
					let messageData: any = {}
					messageData.model = 'success'
					messageData.text = '获取成功！'
					messageRef.value.show(messageData)
					
				 }else{
					let messageData: any = {}
					messageData.model = 'warn'
					messageData.text = '未获取到您在东阳的居住证数据'
					messageRef.value.show(messageData)
					data.jzzLoading=false
				 }
				 getReJzz()
			}).catch(()=>{
				data.jzzLoading=false
			})
		}
	}
	//获取大数据社保
	const getCbInfo=()=>{
		let idcard=user.userInfo?.idcard
		if(!idcard){
			return
		}
		let sbcountMap=util.getCookie("getSbCount:"+idcard);
		console.log(sbcountMap)
		let curData=DayJs(new Date()).format('YYYYMMDD');
		let flag=true;
		let count=1;
		if(sbcountMap){
			let json=sbcountMap
			count=json[curData]||1
			if(json[curData]&&Number(json[curData])>=1){
				flag=false;
				let messageData: any = {}
				messageData.model = 'warn'
				messageData.text = '今日社保信息获取已达上限，请明天再试！'
				messageRef.value.show(messageData)
				return
			}
		}
		if(flag){
			data.sbLoading=true
			$api.common.send.post("EduSocialSecurity0008", {},null,true).then((res: any) => {
				let map = {} as any;
        		map[curData]=count + 1
				util.setCookie("getSbCount:"+idcard,map);
				 if(res.result&&res.result.length>0){
					let messageData: any = {}
					messageData.model = 'success'
					messageData.text = '获取成功！'
					messageRef.value.show(messageData)
					
				 }else{
					 let messageData: any = {}
					 messageData.model = 'warn'
					 messageData.text = '未获取到您在东阳的企业养老参保数据'
					 messageRef.value.show(messageData)
					 data.sbLoading=false
				 }
				 getReSb();
			}).catch(()=>{
				data.sbLoading=false
			})
		}
	}
	//获取大数据网签
	const getWqInfo=()=>{
		let idcard=user.userInfo?.idcard
		if(!idcard){
			return;
		}
		//获取网签信息
		let wqcountMap=util.getCookie("getWqCount:"+idcard);
		let curData=DayJs(new Date()).format('YYYYMMDD');
		let flag=true;
		let count=1;
		if(wqcountMap){
			let json=wqcountMap
			count=json[curData]||1
			if(json[curData]&&Number(json[curData])>=1){
				flag=false;
				let messageData: any = {}
				messageData.model = 'warn'
				messageData.text = '今日网签信息获取已达上限，请明天再试！'
				messageRef.value.show(messageData)
				return
			}
		}
		if(flag){
			data.wqLoading=true
			$api.common.send.post("eduNetsign0008", {},null,true).then((res: any) => {
				let map = {} as any;
        		map[curData]=count + 1
				util.setCookie("getWqCount:"+idcard,map);
				if(res.result&&res.result.length>0){
					let messageData: any = {}
					messageData.model = 'success'
					messageData.text = '获取成功！'
					messageRef.value.show(messageData)
					
				 }else{
					let messageData: any = {}
					messageData.model = 'warn'
					messageData.text = '未获取到您在东阳的购房合同数据'
					messageRef.value.show(messageData)
					data.wqLoading=false
				 }
				 getReWq()
			}).catch(()=>{
				data.wqLoading=false
			})
		}
	}
	const gotoAppeal=(type:String)=>{
		//前往申诉
		$router.push('/pages/edu/appeal/appeal', {type:type});
	}
	const onShowMessage=(mesData:any)=>{
		messageRef.value.show(mesData)
	}
</script>
<style lang="scss" scoped>
	.custom-switcher {
		display: flex;
		align-items: center;
	}
</style>
